<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  
  <body>
    <div id="title1">title1</div>
    <div id="title2">title2</div>
  </body>
  
  <script>
    /* DOM更新时机 */
    const title1 = document.querySelector('#title1');
    let color = 'red';
    let count = 0;
    const timer = setInterval(() => {
      count++;
      if (count > 10) clearInterval(timer);
      if (color === 'red') {
        title1.style.background = 'blue';
        color = 'blue';
      } else {
        title1.style.background = 'red';
        color = 'red';
      }
    }, 4);
    
    /* requestAnimationFrame */
    const title2 = document.querySelector('#title2');
    function iterate() {
      count++;
      if (count < 60) {
        requestAnimationFrame(() => {
          if (color === 'red') {
            title2.style.background = 'blue';
            color = 'blue';
          } else {
            title2.style.background = 'red';
            color = 'red';
          }
          iterate();
        });
      }
    }
    iterate();
  </script>
</html>